<template>
  <scroll-view class="container" scroll-y>
    <text class="title main-title">泉州风光</text>
    <swiper class="swiper" autoplay interval="3000" circular indicator-dots>
      <swiper-item>
        <image src="/static/城市探索-泉州/city1.jpg" mode="widthFix" class="swiper-img" />
      </swiper-item>
      <swiper-item>
        <image src="/static/城市探索-泉州/city2.jpg" mode="widthFix" class="swiper-img" />
      </swiper-item>
      <swiper-item>
        <image src="/static/城市探索-泉州/city3.jpg" mode="widthFix" class="swiper-img" />
      </swiper-item>
      <swiper-item>
        <image src="/static/城市探索-泉州/city4.jpg" mode="widthFix" class="swiper-img" />
      </swiper-item>
      <swiper-item>
        <image src="/static/城市探索-泉州/city5.jpg" mode="widthFix" class="swiper-img" />
      </swiper-item>
    </swiper>

    <view class="section intro-section">
      <text class="title section-title">泉州介绍</text>
      <view class="force-rich-text-style">
        <rich-text class="intro" :nodes="introNodes"></rich-text>
      </view>
    </view>

    <view class="section progress-section">
      <text class="title section-title">探索进度</text>
      <view class="progress-container">
        <progress percent="60" show-info stroke-width="6" color="#3cc51f" active />
      </view>
    </view>

    <view class="section">
      <text class="title section-title">选择城市</text>
      <picker mode="region" @change="handleCityChange" value="{{ cityArr }}">
        <view class="picker-view">
          <text class="picker-text">当前选择：{{ cityText }}</text>
        </view>
      </picker>
    </view>

    <view class="section">
      <text class="title section-title">泉州宣传</text>
      <video src="/static/城市探索-泉州/city-video.mp4" poster="/static/城市探索-泉州/video-poster.jpg" controls autoplay loop class="video" objectFit="cover" />
    </view>

    <view class="section">
      <text class="title section-title">泉州背景音乐</text>
      <button class="music-play-btn" @click="toggleMusic">{{ isMusicPlaying ? '暂停' : '播放' }}</button>
      <text class="music-desc">泉州南音 - 泉州传统乐园</text>
    </view>

    <view class="section">
      <text class="title section-title">偏好设置</text>
      <view class="preference-item">
        <text class="preference-label">出行方式:</text>
        <radio-group @change="handleTransportChange" class="radio-group">
          <label class="radio-item">
            <radio value="bus" checked color="#CEFFCE" /> 公交
          </label>
          <label class="radio-item">
            <radio value="car" color="#CEFFCE" /> 自驾
          </label>
          <label class="radio-item">
            <radio value="walk" color="#CEFFCE" /> 步行
          </label>
        </radio-group>
      </view>
      <view class="preference-item">
        <text class="preference-label">显示推荐景点:</text>
        <switch checked @change="handleRecommendSwitch" color="#CEFFCE" />
      </view>
      <view class="preference-item">
        <text class="preference-label">探索半径:</text>
        <view class="radius-container">
          <text class="radius-text">{{ radius }}km</text>
          <slider 
            :value="radius" 
            min="0" 
            max="20" 
            @change="handleRadiusChange" 
            activeColor="#007AFF" 
            block-size="20" 
          />
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: "CityDiscovery",
  data() {
    return {
      cityArr: ["福建省", "泉州市", "丰泽区"],
      cityText: "福建省 - 泉州市 - 丰泽区",
      transport: "bus",
      showRecommend: true,
      radius: 10,
      audioContext: null,
      isMusicPlaying: false,
      introNodes: [
        {
          name: 'div',
          attrs: { style: 'font-size: 22rpx;font-weight:bold; margin-bottom: 14rpx;text-align: center' },
          children: [{ type: 'text', text: '海上丝绸之路起点 - 泉州' }]
        },
        {
          name: 'div',
          attrs: { style: 'font-size: 20rpx; line-height: 1.5; margin-bottom: 14rpx;' },
          children: [
            { name: 'span', attrs: { style: 'font-weight: bold;' }, children: [{ type: 'text', text: '历史文化' }] },
            { type: 'text', text: '：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为' },
            { name: 'span', attrs: { style: 'color: blue; text-decoration: underline;' }, children: [{ type: 'text', text: '“东方第一大港”' }] },
            { type: 'text', text: '，2021年“泉州：宋元中国的世界海洋商贸中心”被列入《世界遗产名录》。' }
          ]
        },
        {
          name: 'div',
          attrs: { style: 'font-size: 20rpx; line-height: 1.5; margin-bottom: 14rpx;' },
          children: [
            { name: 'span', attrs: { style: 'font-weight: bold;' }, children: [{ type: 'text', text: '著名景点' }] },
            { type: 'text', text: '：清源山(' },
            { name: 'span', attrs: { style: 'color: blue; text-decoration: underline;' }, children: [{ type: 'text', text: '5A级景区' }] },
            { type: 'text', text: '，有老君岩造像）、开元寺（唐代古寺，镇国塔、仁寿塔为标志）、泉州清净寺（中国现存最古老的伊斯兰教寺）、崇武古城（明代抗倭古城）、洛阳桥（中国四大古桥之一）。' }
          ]
        },
        {
          name: 'div',
          attrs: { style: 'font-size: 20rpx; line-height: 1.5; margin-bottom: 14rpx;' },
          children: [
            { name: 'span', attrs: { style: 'font-weight: bold;' }, children: [{ type: 'text', text: '特色文化' }] },
            { type: 'text', text: '：拥有南音（中国' },
            { name: 'span', attrs: { style: 'color: blue; text-decoration: underline;' }, children: [{ type: 'text', text: '现存最古老' }] },
            { type: 'text', text: '的乐种之一，世界级非遗）、提线木偶戏（传承千年的民间艺术）、闽派建筑（红砖古厝、燕尾脊为特色）、泉州花灯（国家级非遗）等丰富的非物质文化遗产。' }
          ]
        },
        {
          name: 'div',
          attrs: { style: 'font-size: 20rpx; line-height: 1.5;' },
          children: [
            { name: 'span', attrs: { style: 'font-weight: bold;' }, children: [{ type: 'text', text: '特色美食' }] },
            { type: 'text', text: '：土笋冻（地方传统小吃）、肉粽（配料丰富，咸香可口）、面线糊（早餐必备，搭配醋肉、油条）、姜母鸭（滋补美食，香气浓郁）。' }
          ]
        }
      ]
    };
  },
  onLoad() {
    this.initAudio();
  },
  onUnload() {
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
    }
  },
  methods: {
    initAudio() {
      this.audioContext = uni.createInnerAudioContext();
      this.audioContext.src = "/static/城市探索-泉州/city-music.mp3";
      this.audioContext.onEnded(() => {
        this.isMusicPlaying = false;
      });
      this.audioContext.onError((err) => {
        console.error("音频播放错误：", err);
        uni.showToast({ title: "音频加载失败", icon: "none" });
      });
    },
    toggleMusic() {
      if (this.isMusicPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isMusicPlaying = !this.isMusicPlaying;
    },
    handleCityChange(e) {
      const cityArr = e.detail.value;
      this.cityArr = cityArr;
      this.cityText = cityArr.join(" - ");
    },
    handleTransportChange(e) {
      this.transport = e.detail.value;
    },
    handleRecommendSwitch(e) {
      this.showRecommend = e.detail.value;
    },
    handleRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.swiper {
  width: 100%;
  height: 500rpx;
  margin: 20rpx 0 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.swiper-img {
  width: 100%;
  height: 100%;
}

.section {
  background-color: #ffffff;
  padding: 24rpx;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.title {
  display: block;
  padding-bottom: 12rpx;
  border-bottom: 1px solid #eeeeee;
  font-weight: 600;
  color: #333333;
}
.main-title {
  font-size: 36rpx;
  margin-top: 10rpx;
}
.section-title {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

.force-rich-text-style >>> div,
.force-rich-text-style >>> span {
  font-size: 20rpx !important;
  line-height: 1.8 !important;
}
.force-rich-text-style >>> div:first-child {
  font-size: 22rpx !important;
}
.force-rich-text-style >>> span[style*="font-weight: bold;"] {
  font-weight: bold !important;
}

.intro {
  line-height: 1.8;
  width: 100%;
}
.intro-section {
  padding-top: 15rpx; 
  padding-bottom: 15rpx;
}

.progress-container {
  width: 100%;
  padding: 15rpx 0; 
  box-sizing: border-box;
}
.progress-section {
  padding-top: 15rpx; 
  padding-bottom: 15rpx;
}

.picker-view {
  padding: 22rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
}
.picker-text {
  font-size: 26rpx;
  color: #333333;
}

.video {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.music-play-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  border-radius: 20rpx;
  background-color: #007AFF;
  color: #ffffff;
  margin-bottom: 16rpx;
}
.music-desc {
  font-size: 24rpx;
  color: #666666;
  display: block;
  text-align: center;
  margin-top: 10rpx;
}

.preference-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.preference-label {
  font-size: 26rpx;
  color: #666666;
  width: 220rpx;
}

.radio-group {
  display: flex;
  gap: 40rpx;
  flex-wrap: wrap;
}
.radio-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #333333;
  gap: 8rpx;
}

.radius-container {
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex: 1;
}
.radius-text {
  font-size: 26rpx;
  color: #333333;
  width: 80rpx;
}

slider {
  width: 100%;
}
slider .wx-slider-handle {
  width: 40rpx;
  height: 40rpx;
  background-color: #007AFF;
  border-radius: 50%;
}
slider .wx-slider-progress {
  height: 8rpx;
  background-color: #007AFF;
}
slider .wx-slider-background {
  height: 8rpx;
  background-color: #e5e5e5;
}
</style>